<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div ng-controller="userController">
		<div ng-path></div>

		<div>
			<form class="form-inline">
				<div class="form-group form-group-sm">
					<input type="text" class="form-control"
						ng-model="um.condition.username" placeholder="用户名" />
				</div>
				<div class="form-group form-group-sm">
					<button type="button" class="btn btn-primary btn-sm"
						ng-click="um.query()">查 询</button>
					<button type="button" class="btn btn-primary btn-sm"
						ng-click="um.clear()">清 理</button>
				</div>
			</form>
		</div>

		<div>
			<table class="table table-hover">
				<thead>
					<tr>
						<td></td>
						<td>序号</td>
						<td>用户名</td>
						<td>邮箱</td>
						<td>电话</td>
						<td>角色</td>
						<td>操作</td>
					</tr>
				</thead>

				<tbody>
					<tr ng-repeat="user in um.pager.list">
						<td><input type="checkbox" value="{{user.id}}"
							ng-disabled="user.id == 1" /></td>
						<td>{{$index + 1}}</td>
						<td>{{user.username}}</td>
						<td>{{user.email}}</td>
						<td>{{user.phone}}</td>
						<td><span class="label label-primary"
							ng-repeat="role in user.roleList" style="margin-right: 3px;">{{role.name}}</span></td>
						<td><shiro:hasPermission name="user:edit">
								<a href="javascript:void(0);" ng-click="um.edit(user)"
									data-toggle="modal" data-target="#userDetail"><span
									class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
							</shiro:hasPermission></td>
					</tr>
					<tr align="center" ng-show="um.pager.list.length == 0">
						<td colspan="8">没有用户信息</td>
					</tr>
				</tbody>
			</table>
			<div>
				<uib-pagination total-items="um.pager.total"
					ng-model="um.pager.pageNum" max-size="5" class="pagination-sm"
					ng-change="um.query()" boundary-link-numbers="true" rotate="false"></uib-pagination>
			</div>
		</div>


		<!-- 用户添加修改 -->
		<div class="modal fade" role="dialog" id="userDetail">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">{{um.title}}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" id="userForm"
							name="userForm">
							<input type="hidden" ng-model="um.user.id" name="id" />
							<div class="form-group">
								<label class="col-sm-4 control-label">用户名</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" name="username"
										disabled="disabled" ng-model="um.user.username">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label">Email</label>
								<div class="col-sm-6">
									<input type="email" disabled="disabled" class="form-control"
										name="email" ng-model="um.user.email">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label">电话</label>
								<div class="col-sm-6">
									<input type="phone" class="form-control" disabled="disabled"
										name="phone" ng-model="um.user.phone">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label">角色</label>
								<div class="col-sm-6">
									<ui-select multiple ng-model="um.roleSelected"
										theme="bootstrap" ng-disabled="um.user.id==1"
										close-on-select="true"> <ui-select-match
										placeholder="选择角色">{{$item.name}}</ui-select-match> <ui-select-choices
										repeat="role in um.roleList">{{role.name}}</ui-select-choices>
									</ui-select>
								</div>
							</div>
							<div class="form-group" ng-show="um.showMessage">
								<div class="col-sm-6 col-sm-offset-4">
									<div class="alert alert-dismissible fade in custom-alert"
										role="alert"
										ng-class="um.result==1?'alert-success':'alert-danger'">
										{{um.message}}</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-primary"
							ng-click="um.addOrEdit(userForm)">提交</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 删除确认 -->
		<div class="modal fade" role="dialog" id="delete">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">用户删除</h4>
					</div>
					<div class="modal-body">
						<div style="text-align: center;">该操作无法回滚，确认执行？</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" ng-click="um.del()">确认</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>